<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/angular.js"></script>
    <script src="../lib/angular-route.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', ['ngRoute'])
                .factory('myFactory', ['$http','$q',function ($http, $q) {
                    console.log("begin factory");
                    var service = {};
                    var baseUrl = 'https://itunes.apple.com/search?term=';
                    var _artist = '';
                    var _finalUrl = '';

                    var makeUrl = function () {
                        _artist = _artist.split('.').join('+');
                        _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK';
                        return _finalUrl;
                    };
                    service.setArtist = function (artist) {
                        _artist = artist;
                    };
                    service.getArtist = function () {
                        return _artist;
                    };
                    service.callItunes = function () {
                        makeUrl();
                        console.log(_finalUrl);
                        var deferred = $q.defer();
                        $http({
                            method:'JSONP',
                            url:_finalUrl
                        }).success(function (data) {
                            return deferred.resolve(data);
                        }).error(function () {
                            deferred.reject('There was an error.');
                        });
                        return deferred.promise;
                    };
                    return service;
                }]
        ).controller('myFactoryCtrl',['$scope','myFactory',
                function ($scope, myFactory) {
                    $scope.data = {};
                    $scope.updateArtist = function () {
                        myFactory.setArtist($scope.data.artist);
                    };
                    $scope.submitArtist = function () {
                        $scope.updateArtist();
                        myFactory.callItunes().then(function (data) {
                                    $scope.data.artistData = data;
                                },
                                function (data) {
                                    console.log(data);
                                    alert(data);
                                });
                    };
                }]
        );
    </script>
</head>
<body ng-app="app">
    <div ng-controller="myFactoryCtrl">
        <div>
            <input type="text" ng-model="data.artist" />
            <button type="button" ng-click="submitArtist()">refresh</button>
        </div>
        <ul>
            <li ng-repeat="artist in data.artistData.results">
                <img ng-src="{{artist.artworkUrl100}}" />
                <div>
                    <p>{{artist.artistName}}</p>
                    <p>{{artist.collectionName}}</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>